<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>004_dom操作内联样式</title>
</head>
<body>
<script type="text/javascript">
    var str = "";
    str += "<div id='box1'></div>";
    document.write(str);

    /*
    *
    * 通过js修改元素的样式：元素.style.样式名=样式值
    *
    * 如果CSS中的样式名含有-，这种名称在js中是不合法的，比如background-color，需要将这种样式名修改为驼峰命名法
    *
    * 我们通过style设置的属性都是内联样式，而我们内联样式有一个较高的优先级，所以通过js修改的样式，往往会立即显示，但是
    * 如果我们在css样式表中写了！important，则此时样式会有一个最高的优先级即使通过js也无法修改
    *
    * 读取样式： 元素.style.样式名   var obj = box1.style.width
    * 通过style设置和读取的都是内联样式
    *
    */
    var box1 = document.getElementById("box1");
    box1.style.width = '200px';
    box1.style.height = '200px';
    box1.style.backgroundColor = 'red';

</script>
</body>
</html>